<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>考勤打卡 - 消防工程集团</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: #f5f5f5;
        }
        .map-container {
            height: 300px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            overflow: hidden;
        }
        .fence-circle {
            position: absolute;
            border: 3px dashed rgba(255,255,255,0.6);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
            50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.05); }
        }
        .user-marker {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-4 py-4 flex items-center">
        <a href="home.html" class="mr-3">
            <i class="fas fa-arrow-left text-xl"></i>
        </a>
        <h1 class="text-lg font-semibold">考勤打卡</h1>
    </div>

    <!-- Map -->
    <div class="map-container relative">
        <div class="fence-circle" style="width: 200px; height: 200px;"></div>
        <div class="user-marker">
            <div class="bg-white rounded-full p-2 shadow-lg">
                <i class="fas fa-map-marker-alt text-red-500 text-2xl"></i>
            </div>
        </div>
        <div class="absolute bottom-4 left-4 right-4 bg-white/90 backdrop-blur-sm rounded-lg p-3">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-xs text-gray-500">当前位置</div>
                    <div class="text-sm font-semibold text-gray-800">消防工程A项目工地</div>
                </div>
                <div class="text-right">
                    <div class="text-xs text-green-600 font-semibold">✓ 在范围内</div>
                    <div class="text-xs text-gray-500">距离: 50米</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Today's Status -->
    <div class="bg-white mx-4 mt-4 rounded-xl shadow-sm p-4">
        <div class="text-gray-700 font-semibold mb-4 flex items-center">
            <i class="fas fa-calendar-day text-blue-500 mr-2"></i>
            今日打卡
        </div>
        <div class="grid grid-cols-2 gap-4">
            <div class="bg-blue-50 rounded-lg p-3">
                <div class="text-xs text-gray-500 mb-1">上班打卡</div>
                <div class="text-lg font-bold text-blue-600">08:30</div>
                <div class="text-xs text-green-600 mt-1">✓ 正常</div>
            </div>
            <div class="bg-orange-50 rounded-lg p-3">
                <div class="text-xs text-gray-500 mb-1">下班打卡</div>
                <div class="text-lg font-bold text-orange-600">--:--</div>
                <div class="text-xs text-gray-400 mt-1">待打卡</div>
            </div>
        </div>
    </div>

    <!-- Punch Button -->
    <div class="px-4 mt-6 mb-4">
        <button class="w-full bg-gradient-to-r from-blue-600 to-blue-700 text-white py-4 rounded-xl font-semibold text-lg shadow-lg active:scale-95 transition-transform">
            <i class="fas fa-map-marker-alt mr-2"></i>
            一键打卡
        </button>
    </div>

    <!-- Monthly Stats -->
    <div class="bg-white mx-4 mt-4 rounded-xl shadow-sm p-4">
        <div class="text-gray-700 font-semibold mb-4 flex items-center">
            <i class="fas fa-chart-line text-green-500 mr-2"></i>
            本月统计
        </div>
        <div class="grid grid-cols-4 gap-3">
            <div class="text-center">
                <div class="text-2xl font-bold text-blue-600">22</div>
                <div class="text-xs text-gray-500 mt-1">出勤天数</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-green-600">0</div>
                <div class="text-xs text-gray-500 mt-1">迟到次数</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-orange-600">1</div>
                <div class="text-xs text-gray-500 mt-1">请假天数</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-red-600">0</div>
                <div class="text-xs text-gray-500 mt-1">旷工天数</div>
            </div>
        </div>
    </div>

    <!-- History -->
    <div class="bg-white mx-4 mt-4 rounded-xl shadow-sm p-4 mb-6">
        <div class="text-gray-700 font-semibold mb-4 flex items-center">
            <i class="fas fa-history text-purple-500 mr-2"></i>
            打卡记录
        </div>
        <div class="space-y-3">
            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-sun text-blue-600"></i>
                    </div>
                    <div>
                        <div class="text-sm font-semibold text-gray-800">上班打卡</div>
                        <div class="text-xs text-gray-500">2024-01-15 08:30</div>
                    </div>
                </div>
                <span class="text-xs text-green-600 bg-green-50 px-2 py-1 rounded">正常</span>
            </div>
            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-moon text-orange-600"></i>
                    </div>
                    <div>
                        <div class="text-sm font-semibold text-gray-800">下班打卡</div>
                        <div class="text-xs text-gray-500">2024-01-15 18:15</div>
                    </div>
                </div>
                <span class="text-xs text-green-600 bg-green-50 px-2 py-1 rounded">正常</span>
            </div>
            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-sun text-blue-600"></i>
                    </div>
                    <div>
                        <div class="text-sm font-semibold text-gray-800">上班打卡</div>
                        <div class="text-xs text-gray-500">2024-01-14 08:25</div>
                    </div>
                </div>
                <span class="text-xs text-green-600 bg-green-50 px-2 py-1 rounded">正常</span>
            </div>
        </div>
        <a href="attendance-stats.html" class="block text-center text-blue-600 text-sm mt-4 py-2">
            查看全部记录 <i class="fas fa-chevron-right text-xs"></i>
        </a>
    </div>
</body>
</html>

